<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Document Dispatch Event Log</title> 
	
  <link rel="stylesheet" href="styles/stencil/screen.css" type="text/css" media="screen" charset="utf-8" /> 
  <link rel="stylesheet" href="styles/stencil/print.css" type="text/css" media="print" charset="utf-8" /> 
  <link rel="stylesheet" href="styles/stencil/custom.css" type="text/css" media="screen" title="no title" charset="utf-8" /> 
  <link href="styles/stencil/lib/plugins/forms.css" rel="stylesheet" type="text/css" /> 
  <link href="styles/stencil/lib/plugins/buttons.css" rel="stylesheet" type="text/css" /> 
  <link href="styles/stencil/lib/plugins/grid.css" rel="stylesheet" type="text/css" /> 
  <link href="styles/stencil/lib/typography.css" rel="stylesheet" type="text/css" /> 

  <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
  <script type="text/javascript"> 
 
  //Load the Visualization API and the ready-made Google table visualization
  google.load('visualization', '1', {'packages':['corechart', 'table']});
 
  // Set a callback to run when the API is loaded.
  google.setOnLoadCallback(init);
 
  // Send the query to the data source.
  function init() {
 
    // Specify the data source URL.
    var query1 = new google.visualization.Query('routedtocapacity');
    var query2 = new google.visualization.Query('throughputbyhour');
    var query3 = new google.visualization.Query('descriptivestats');
 
    // Send the query with a callback function.
    query1.send(drawChart1);
    query2.send(drawChart2);
    query3.send(drawChart3);
  }
 
  // Handle the query response.
  function drawChart1(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }
 
    // Draw the visualization.
    var data = response.getDataTable();
    var chart1 = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart1.draw(data, {height: 500, title: 'Operator Remaining Capacity'});

  }
  
  function drawChart2(response) {
	    if (response.isError()) {
	      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
	      return;
	    }
  	
	var data = response.getDataTable();
    var chart2 = new google.visualization.LineChart(document.getElementById('linechart_div'));
    chart2.draw(data, {height: 500, title: 'Run Chart'});
  }
  
  function drawChart3(response) {
	    if (response.isError()) {
	      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
	      return;
	    }
	
	var data = response.getDataTable();
  var chart3 = new google.visualization.Table(document.getElementById('stats_div'));
  chart3.draw(data, {allowHtml: true, title: 'Performance by Operator'});
}
  </script> 

  </head> 
   <body id="index"> 
   
  <div id="page" class="xgrid xfluid"> 
  	
  	<div id="header" class="x12">		
  		<div class="xpad"> 
  			<h1>Reports</h1>		
  		</div> 
  	</div> 

  <%@ include file="headermenu.jsp" %></div>

  <table align="center">
      <tr valign="top">
        <td>
          <div id="chart_div"></div>
        </td>
      </tr>
      <tr>
        <td >
          <div id="linechart_div"></div>
        </td>
      </tr>
        <tr>
        <td >
          <div id="stats_div"></div>
        </td>
      </tr>
    </table>
    

</body> 
</html>